<template>
  <div class="home-page">
    <div class="welcome-section">
      <h1>欢迎使用系统</h1>
      <p>这是您的个人仪表板，您可以在这里查看系统概况和个人信息。</p>
    </div>
    
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-icon">
              <el-icon size="30" color="#409EFF"><User /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-value">123</div>
              <div class="stat-label">在线用户</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-icon">
              <el-icon size="30" color="#67C23A"><View /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-value">456</div>
              <div class="stat-label">今日访问</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-icon">
              <el-icon size="30" color="#E6A23C"><Message /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-value">78</div>
              <div class="stat-label">系统消息</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-icon">
              <el-icon size="30" color="#F56C6C"><DataAnalysis /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-value">89</div>
              <div class="stat-label">数据分析</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>用户信息</span>
          </template>
          <div class="user-details">
            <p><strong>用户名:</strong> {{ userInfo.username }}</p>
            <p><strong>邮箱:</strong> {{ userInfo.email || '未设置' }}</p>
            <p><strong>登录时间:</strong> {{ loginTime }}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>快速操作</span>
          </template>
          <div class="quick-actions">
            <el-button type="primary" @click="goToUserManagement">用户管理</el-button>
            <el-button type="success">系统设置</el-button>
            <el-button type="warning">数据导出</el-button>
            <el-button type="info">帮助文档</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { User, View, Message, DataAnalysis } from '@element-plus/icons-vue'

export default {
  name: 'Home',
  components: {
    User,
    View,
    Message,
    DataAnalysis
  },
  setup() {
    const router = useRouter()
    const userInfo = ref({})
    const loginTime = ref('')
    
    onMounted(() => {
      const storedUserInfo = localStorage.getItem('userInfo')
      if (storedUserInfo) {
        userInfo.value = JSON.parse(storedUserInfo)
      }
      loginTime.value = new Date().toLocaleString()
    })
    
    const goToUserManagement = () => {
      router.push('/user-management')
    }
    
    return {
      userInfo,
      loginTime,
      goToUserManagement
    }
  }
}
</script>

<style scoped>
.home-page {
  padding: 20px;
}

.welcome-section {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
}

.welcome-section h1 {
  color: #303133;
  margin-bottom: 10px;
}

.welcome-section p {
  color: #606266;
  font-size: 16px;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  cursor: pointer;
  transition: all 0.3s;
}

.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.stat-item {
  display: flex;
  align-items: center;
  padding: 10px;
}

.stat-icon {
  margin-right: 15px;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  color: #909399;
  font-size: 14px;
}

.user-details p {
  margin: 10px 0;
  font-size: 14px;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-actions .el-button {
  width: 100%;
}
</style>